<template>
  <div class="home">
    
    <div class="header">
      <div class="header_con">
        <div class="search_box" @click="toHomeSearch">
          <img src="../../static/img/search.png" />
          <span>找酒类</span>
        </div>
        <img src="../../static/img/message.png" alt="" class="message" @click="toMessage">
      </div>
    </div>
<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller" style="top:60px;">
    <div class="shop_list" >
      <ul  class="shop_list_ul">
        <li v-for="(item,index) in shopData" :key="index" @click="toShopDetails(item.shopHome)">
          <p class="img_box"></p>
          <p class="shop_name">{{item.shopName}}</p>
        </li>
      </ul>
    </div>
    <div class="liquor_type">
      <p class="liquor_top_tit">精选品类</p>
      <div class="liquor_type_list">
        <div class="liquor_type_list_l liquor_type_list_c">
          <router-link to="/liquorType/1">
            <div class="liquor_type_list_l_t">
              <span>白酒类</span>
            </div>
          </router-link>
          <router-link to="/liquorType/2">
            <div class="liquor_type_list_l_b">
              <span>啤酒类</span>
            </div>
             </router-link>
          </div>
        <div class="liquor_type_list_r liquor_type_list_c">
        <router-link to="/liquorType/3">
          <div class="liquor_type_list_r_t">
            <span>红酒类</span>
          </div>
       </router-link>
        <router-link to="/liquorType/4">
          <div class="liquor_type_list_r_c">
            <span>洋酒类</span>
          </div>
           </router-link>
          <router-link to="/liquorType/5">
          <div class="liquor_type_list_r_b">
            <span>其他</span>
          </div>
        </router-link>
        </div>
      </div>
    </div>
    <div class="liquor_list">
      <p class="liquor_top_tit">推荐好酒</p>
      <div class="liquor_list_c">
        <ul class="liquor_list_con">
            <li v-for="(item,index) in startList" :key="index" @click="toGoodsDetails(index)">
                <p class="imgUrl">{{item.imgUrl}}</p>
                <div class="liquor_list_text">
                    <span class="liquor_list_title">{{item.title}}</span>
                    <p class="liquor_list_xx">
                        <span class="liquor_list_price">&yen;{{item.price}}</span>
                        <span class="liquor_list_freeShipping" v-if="item.freeShipping">包邮</span>
                    </p>
                </div>
            </li>
        </ul>
      </div>
    </div>
    </scroller>
    <footer-bar :active-index=0></footer-bar>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      shopData:[
        {
          shopName:'酒一',
          imgUrl:'',
          shopHome:0
        },
        {
          shopName:'千杯不醉酒店',
          imgUrl:'',
          shopHome:1
        },
        {
          shopName:'茶酒铺',
          imgUrl:'',
          shopHome:2
        },
        {
          shopName:'尚品茶酒铺',
          imgUrl:'',
          shopHome:3
        },
        {
          shopName:'乐土茶酒铺',
          imgUrl:'',
          shopHome:4
        },
        {
          shopName:'小杜康',
          imgUrl:'',
          shopHome:5
        },
        {
          shopName:'天天来酒铺',
          imgUrl:'',
          shopHome:6
        },
        {
          shopName:'茶九驿站',
          imgUrl:'',
          shopHome:7
        },
        {
          shopName:'琼浆酒馆',
          imgUrl:'',
          shopHome:8
        },
        {
          shopName:'十里香',
          imgUrl:'',
          shopHome:9
        },
        {
          shopName:'隐仙酒坊',
          imgUrl:'',
          shopHome:10
        },

      ],
      liquorList:[],
      startList:[],
    }
  },
  created(){
    let self=this;

    /*初始化推荐好酒列表*/
    this.axios.get('../../static/dataJson/liquorList.json').then((r)=>{
      self.liquorList=r.data.data.map((item)=>{
        return {
          imgUrl:item.imgUrl,
          title:item.title,
          price:item.price,
          freeShipping:item.freeShipping
        }
      })
    }).then(()=>{
      this.liquorList.forEach((item,index)=>{
      if(index<4){
        self.startList.push(item)
      };
      this.top = 1;
      this.bottom = 20;
    })
    });
  },
  methods:{
    toHomeSearch(){
      this.$router.push('/searchList')
    },
    toMessage(){
      this.$router.push('/message')
    },
    toShopDetails(index){
      this.$router.push({path:'/shopDetails',query:{id:index}});

    },
    toGoodsDetails(index){
      this.$router.push({path:'/goodsDetails',query:{id:index}});
    },
    /*上拉刷新，下拉加载*/
    infinite(done) { /*下拉加载*/
      console.log(this.noData)
      if(this.noData) {
      setTimeout(()=>{
          this.$refs.myscroller.finishInfinite(2);
      })
      return;
      }
      let self = this;
      let start = this.liquorList.length;

      let start1=this.startList.length;
      setTimeout(() => {
          for(let i = start1; i < start1 + 4; i++) {
            if (start1 >= start){
              self.noData = "没有更多数据了";
              self.$refs.myscroller.resize();
              done();
              return;
            }else{
self.startList.push(this.liquorList[i])
            }
              
          }
          if(start1 >= start) {
              self.noData = "没有更多数据了"
          }
          self.$refs.myscroller.resize();
          done()
      }, 1500)

    },
    refresh(done) { /*上拉刷新*/
        var self = this
      setTimeout(
        // function () {
        //   var start = self.top - 1
        //   for (var i = start; i > start - 4; i--) {
        //     self.startList.splice(0, 0, i);
        //   }
        //   self.top = self.top - 4;
        //   done();
        // }
        self.shuffle(self.startList)
      
      , 1500)
      console.log(self.startList);
    },
    shuffle(arr) {
        let i = arr.length;
        while (i) {
            let j = Math.floor(Math.random() * i--);
            [arr[j], arr[i]] = [arr[i], arr[j]];
        }
        return arr;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url(../assets/less/public.less);
.home {
  background:#cccccc;
    .header{
      @height();
      position: fixed;
      left: 0;
      right: 0;
      z-index: 2;
      background: @config-bg;
      .header_con{
        @width();
        @flex();
        @justify1();
        .search_box{
          flex-grow: 1;
          margin-right: 1em;
          background: #ffffff;
          height: 2em;
          border-radius: 1em;
          box-sizing: border-box;
          padding: 0 0 0 1em;
          color: #aaaaaa;
          @flex();
          @justify3();
          img{
            width: 1.3em;
            margin-right: 0.8em;
          }
        }
      }
    }
    .shop_list{
      @width();
      margin: 0.8em auto;
      height: 70px;
      overflow-y: hidden;
      ul{
        white-space: nowrap;
        overflow-x: auto;
        li{
          display: inline-block;
          margin-right: 1em;
          width: 50px;
          height: 76px;
          .img_box{
            border-radius: 50px;
            height: 50px;
            background: @config-bg
            }
          .shop_name{
            width: 50px;
            text-align: center;
            color: #aaaaaa;
            height: 26px; 
            line-height: 26px; 
            @whiteSpace()
            }
        }
      }
    }
    .liquor_type{
      @width();
      margin: 2em auto;
      .liquor_top_tit{
        text-align: left;
        margin-bottom: 10px;
      }
      .liquor_type_list{
        @flex();
        @justify4();
        .liquor_type_list_c{
          width: 49%;
          div{
            margin-bottom: 7px;
            background: @config-bg;
            color: @config-bg2;
            overflow: hidden;
            border-radius: 3px;
            height: 125px;
            text-align: left;
            span{
              margin: 1em 0 0 1em;
              display: block;
              @font16();
            }
          }
        }
        .liquor_type_list_l{
          .liquor_type_list_l_t{
            height: 257px;
          }
        }
      }
    }
    .liquor_list{
      .liquor_top_tit{
        text-align: left;
         @width();
        margin-bottom: 1.5em; 
      }
      .liquor_list_c{
        width: 100%;
        background: @config-bg3;
        .liquor_list_con{
          @width();
          @flex();
          @justify4();
          flex-wrap: wrap;
          padding-bottom: 80px;
          li{
            width: 49%;
            background: @config-bg2;
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 8px;
            .imgUrl{
              height: 200px;
              background: @config-bg;
            }
            .liquor_list_text{
              height: 4.5em;
              overflow: hidden;
              box-sizing: border-box;
                padding: 0.8em 0 0.8em 0.7em;
                text-align: left;
                box-sizing: border-box;
                .liquor_list_title{
                    display: block;
                    line-height: 1.7em
                }
                .liquor_list_xx{
                  @flex();
                  @justify4();
                  .liquor_list_price{
                    color: @config-bg;
                  }
                  .liquor_list_freeShipping{
                    background: @config-bg;
                    color: @config-bg2;
                    padding: 0.2em 0.4em;
                    margin-right: 10px;
                  }
                }
            }
          }
        }
      }

    }
  }

</style>
